<template>
  <el-container style="height: 100%" v-loading="isLoading">
    <el-header
      class="zone-head-container bj"
      :style="{
        backgroundImage:
          // 'url(https://pic.imgdb.cn/item/64eb64df661c6c8e549e1ce8.png)',
          // 'url(/image/{2FB1489E-9572-4803-9114-850E04589092}.png)',
          userInfo.background == null || userInfo.background == ''
            ? 'url(/image/{2FB1489E-9572-4803-9114-850E04589092}.png)'
            : `url(${userInfo.background})`,
        padding: '0',
      }"
    >
      <img
        class="img2"
        v-if="
          userInfo.background == null ||
          userInfo.background == '' ||
          userInfo.background == set.background
        "
        src="https://pic.imgdb.cn/item/64e8cf5d661c6c8e5411e646.png"
      />
    </el-header>
    <div>
      <div class="head-area item">
        <el-avatar class="avatar" :src="userInfo.headurl" />
        <el-row class="center name">
          <el-text class="nickname">{{ userInfo.nickname }}</el-text>
          <UserRole :role="userInfo.role" :size="set.ismobile ? 'small' : ''" />
          <el-tag size="small" effect="light" round>
            UID: {{ userInfo.id }}
          </el-tag>
          <el-text class="mx-1" type="info">
            {{ userInfo.stat == 0 ? '该用户封禁中' : '' }}
          </el-text>
        </el-row>
      </div>

      <div class="item">
        <MdPreview
          v-if="userInfo.signature"
          :modelValue="userInfo.signature"
          :editorId="`preview-user-${userInfo.id}`"
        />
      </div>
    </div>
  </el-container>
</template>

<script lang="ts">
// 他人用户主页
import { ElMessage } from 'element-plus'
import Cfg from '@/config/config.ts'
import Method from '@/globalmethods.ts'
import UserRole from '@comps/user/roleList.vue'
import { api } from '@/apitypes'
import { MdPreview } from 'md-editor-v3'

export default {
  name: 'UserIndex',
  components: {
    UserRole,
    MdPreview,
  },
  data() {
    let {
      set,
      config: { server },
      headsize: { userindex },
    } = Cfg
    return {
      set,
      userInfo: {
        background: '',
        headurl: '',
        nickname: '',
        role: '',
        signature: '',
        id: 0,
        stat: 1,
      },
      uploadServer: `${server}/Upload/Upload`,
      activeTab: 0,
      isLoading: true,
      bbsList: <any>[],
      worldList: <any>[],
      modList: <any>[],
      activePages: <boolean[]>[true, false, false],
      headsize: userindex,
    }
  },
  methods: {
    getUserInfo() {
      Method.api_post(`/user/info`, { uid: this.$route.params.uid })
        .then((response: any) => {
          let res = response.data as api
          let data = res.data
          if (res.code == 200) {
            this.userInfo = {
              background: data.background,
              headurl: data.headurl,
              nickname: data.nickname,
              role: data.role,
              signature: data.signature,
              id: data.id,
              stat: data.stat,
            }
            this.isLoading = false
          } else {
            ElMessage(res.msg)
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
  },
  mounted() {
    this.getUserInfo()
  },
  activated() {
    this.getUserInfo()
  },
}
</script>

<style scoped>
.bj {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.zone-head-container {
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  position: relative;
  height: 280px;
  width: 100%;
}

.zone-head-container .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zone-head-container .img2 {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  height: 20%;
  object-fit: cover;
}

.item {
  max-width: 1000px;
  margin: 0 auto;
}

.nickname {
  margin: 0 12px;
  font-size: 26px;
  font-weight: bold;
}
.avatar {
  position: relative;
  z-index: 1;
  bottom: 0.5rem;
  min-height: 120px;
  min-width: 120px;
}
.name {
  z-index: 1;
  position: relative;
  top: 0.5rem;
}
.center {
  display: flex;
  align-items: center;
}

.head-area {
  padding: 0 1rem 0.5rem 1rem;
  height: 5rem;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .zone-head-container {
    height: 120px;
  }
  .avatar {
    min-height: 68px;
    min-width: 68px;
  }
  .nickname {
    font-size: 18px;
  }
  .zone-head-container .img2 {
    height: 35%;
  }
}
</style>
